<template>
  <div class="header-wrap">
    <div class="header" v-el:header>
      <div class="more" :class="{'up':showFlag}" v-touch:tap.stop.prevent="show"></div>
      <div class="logo" v-touch:tap.stop.prevent="go('http://caitong.sina.cn/')" data-sudaclick="navigationbar_homepage"></div>
      <div class="login" v-show="!isLogin" v-touch:tap.stop.prevent="login"></div>
      <div class="avatar" v-show="isLogin" v-touch:tap.stop.prevent="avatar" v-el:avatar>
      </div>
    </div>
    <div class="nav" v-show="showFlag" transition="move" v-el:nav>
      <div class="nav-content">
        <div class="tabs">
          <div class="tab-item" v-touch:tap.stop.prevent="go('http://lotto.sina.cn/')" data-sudaclick="navigationbar_homepage">首页</div>
          <div class="tab-item" v-touch:tap.stop.prevent="go('http://caitong.sina.cn/')" data-sudaclick="navigationbar_caitong">彩通</div>
          <div class="tab-item" v-touch:tap.stop.prevent="go('http://sports.sina.cn/lottery/lottery/beidan/')" data-sudaclick="navigationbar_jingcai">竞彩</div>
          <div class="tab-item" v-touch:tap.stop.prevent="go('http://sports.sina.cn/lottery/lottery/shengfucai/')" data-sudaclick="navigationbar_soccer">足彩
          </div>
          <div class="tab-item" v-touch:tap.stop.prevent="go('http://sports.sina.cn/lottery/lottery/shuangseqiu/')" data-sudaclick="navigationbar_ssq">
            双色球
          </div>
        </div>
        <div class="box border-1px">
          <div class="title" v-touch:tap.stop.prevent="go('http://lotto.sina.cn/ai/')" data-sudaclick="navigationbar_pao">
            小炮<i class="hot"></i>
          </div>
          <div class="content">
            <div class="item" v-touch:tap.stop.prevent="go('http://lotto.sina.cn/ai/ranking/')"  data-sudaclick="navigationbar_paoranking">小炮指数</div>
            <div class="item" v-touch:tap.stop.prevent="go('http://lotto.sina.cn/ai/youhui/')"  data-sudaclick="navigationbar_paorecharge">优惠充值</div>
            <div class="item" v-touch:tap.stop.prevent="go('http://lotto.sina.cn/ai/app/download/')"  data-sudaclick="navigationbar_paoAPPdownload">APP下载</div>
          </div>
        </div>
        <div class="box box1 border-1px">
          <div class="title" v-touch:tap.stop.prevent="go('http://lotto.sina.cn/open/')"  data-sudaclick="navigationbar_drawing">
            开奖<i class="new"></i>
          </div>
          <div class="content">
            <div class="item" v-touch:tap.stop.prevent="go('http://lotto.sina.cn/video/tcopen/')"  data-sudaclick="navigationbar_tcopen">体彩直播</div>
            <div class="item" v-touch:tap.stop.prevent="go('http://lotto.sina.cn/video/fcopen/')"  data-sudaclick="navigationbar_fcopen">福彩直播</div>
          </div>
        </div>
        <div class="box box1 border-1px">
          <div class="title title_inline" v-touch:tap.stop.prevent="go('https://sina.cn/')"  data-sudaclick="navigationbar_sina_home">
            新浪首页
          </div>
          <div class="title title_inline" v-touch:tap.stop.prevent="go('https://sports.sina.cn/')"  data-sudaclick="navigationbar_sina_sports">
            新浪体育
          </div>
        </div>
        <div class="kf">
          客服电话 :<a href="tel:400-6900-000-4-5" id="kf_tel">400-6900-000-4-5</a>
        </div>
        <div class="nav-close" v-touch:tap.stop.prevent="close" data-sudaclick="navigationbar_close">
          <span class="icon-close">关闭</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll';
  export default {
    data() {
      return {
        showFlag: false,
        isLogin: false
      };
    },
    created() {
      this._initLogin();
    },
    methods: {
      show() {
        this.showFlag = !this.showFlag;
        let self = this;
        if (this.showFlag) {
          let w = util.viewData().viewWidth;
          $(self.$els.header).addClass('fixed');
          if (w > maxW) {
            w = maxW
            $(self.$els.nav).css({'left': '50%', 'right': 'auto', 'width': w + 'px', 'marginLeft': -w / 2 + 'px'});
            $(self.$els.header).css({'left': '50%', 'right': 'auto', 'width': w + 'px', 'marginLeft': -w / 2 + 'px'})
          }
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new BScroll(this.$els.nav, {
                click: true
              });
            } else {
              this.scroll.refresh();
            }
          });
          window.SIMA && window.SIMA({
            action: '_click',
            data: {
              'aid': 'navigationbar'
            }
          });
        } else {
          $(self.$els.header).removeClass('fixed');
          window.SIMA && window.SIMA({
            action: '_click',
            data: {
              'aid': 'navigationbar_return'
            }
          });
        }
      },
      close() {
        this.showFlag = !this.showFlag;
        let self = this;
        $(self.$els.header).removeClass('fixed');
      },
      login() {
        window.middleLogin();
        return;
      },
      go(url) {
        if (url) {
          window.location.href = url;
        }
      },
      avatar() {
        window.location.href = 'http://my.sina.cn/?vt=4&pos=108';
      },
      _initLogin() {
        let _this = this;
        let util = window.util;

        function WapLogin() {
          let _loginLayer = '';
          this.login = function (b, f, c, d) {
            var e = arguments.length;
            if (window.SINA_OUTLOGIN_LAYER && !b) {
              _loginLayer = window.SINA_OUTLOGIN_LAYER;
              _loginLayer.set('sso', {
                entry: 'wapsso'
              }).init();
              _loginLayer.show();
              _loginLayer.register('login_success', function (g) {
                if (typeof(g) != 'undefined' && typeof(g.nick) != 'undefined') {
                  window.userInfo = {};
                  window.userInfo.uname = g.nick;
                  window.userInfo.userface = g.portrait;
                  window.userInfo.uid = g.uid;
                  window.userInfo.islogin = 1;
                  window.loginModule.render();
                  window.SIMA && window.SIMA({
                    action: '_click',
                    data: {
                      'aid': 'launcher_login_weibo_success'
                    }
                  });
                } else {
                  util.alert('登录账号异常，请重新登录');
                }
              });
              _loginLayer.register('layer_hide', function () {
                f = null
              })
            }
            return false
          };
          this.updateUserInfo = function (d) {
            if (typeof(d) != 'undefined' && typeof(d.nick) != 'undefined') {
              window.userInfo = {};
              window.userInfo.uname = d.nick;
              window.userInfo.userface = d.portrait;
              window.userInfo.uid = d.uid;
              window.userInfo.islogin = 1;
              window.loginModule.render();
            }
            return false
          }
        };
        window.middleLogin = function () {
          var wapLoginObj = new WapLogin();
          wapLoginObj.login(null, function () {
          });
        }
        window.loginModule = {
          getUserInfo: function () {
            var self = this;
            if (window.userInfo) {
              self.render();
            } else {
              var url = 'https://passport.sina.cn/sso/islogin?';
              if (url.indexOf('?') == -1) {
                url = url + '?';
              }
              var oDate = new Date();
              var data = {
                random: Math.random(),
                time: oDate.getTime()
              }
              util.jsonp1({
                success: function (rs) {
                  rs.data = rs.data || {};
                  rs.data.uname = rs.data.nick;
                  rs.data.userface = rs.data.portrait_url;
                  window.userInfo = rs.data;
                  self.render();
                },
                error: function () {
                },
                url: url,
                data: data,
                timeout: 3000
              })
            }
          },
          loadImage: function (url, callback) {
            var img = new window.Image();
            img.onload = function () {
              img.onload = null;
              callback(img);
            }
            img.src = url;
          },
          render: function () {
            var self = this;
            _this.isLogin = true;
            util.wbId = window.userInfo.uid;
            if (window.userInfo.userface) {
              window.$(_this.$els.avatar).html('<img src=' + window.userInfo.userface + ' alt=' + window.userInfo.uname + ' />');
              window.userInfo.avatar_large = window.userInfo.userface.replace(/222.50/g, '222.180');
              util.avatar_large = window.userInfo.avatar_large;
              self.loadImage(window.userInfo.avatar_large, function () {
                if (!window.userInfo.avatar_large) {
                  window.userInfo.avatar_large = 'http://n.sinaimg.cn/sports/lottpao/v120/wap/i/header_sidebar_face.png'
                }
                window.$(_this.$els.avatar).html('<img src=' + window.userInfo.avatar_large + ' alt=' + window.userInfo.uname + ' />');
              });
            }
            if (util.wbId) {
              var ckName = 'SINA_WB_LOCAL_NICKNAME';
              var ckNameId = 'SINA_WB_LOCAL_NICKNAME_UID';
              var ckDomain = 'sina.cn';
              util.setSinaWbCookie(ckName, window.userInfo.uname, ckDomain, 0);
              util.setSinaWbCookie(ckNameId, window.userInfo.uid, ckDomain, 0);
            }
          },
          bindEvent: function () {
            var $mask = window.$('#ct0_mask_full');
            $mask.length > 0 && $mask.bind('touchmove', function (e) {
              e.preventDefault();
              return false;
            });
          },
          init: function () {
            var self = this;
            var isLogin = window.checkLogin();
            if (isLogin && window.curCtLoginInfo.isLogin) {
              self.getUserInfo();
            }

            self.bindEvent();
          },
          controller: function () {
            var self = this;
            self.init();
          }
        }
        window.loginModule.controller();
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .header
    height: 44px
    background: c_red
    position: relative
    text-align: center
    z-index: 1000
    &.fixed
      position: fixed
      top: 0px
      left: 0px
      right: 0px
      z-index: 1001
    .more
      position: absolute
      left: 8px
      top: 6px
      width: 32px
      height: 32px
      background-size: 32px 32px
      background-repeat: no-repeat
      vertical-align: top
      bg-image('i/icon_more')
      cursor: pointer
      &.up
        bg-image('i/icon_arrowup')
    .logo
      display: inline-block
      width: 72px
      height: 25px
      margin-top: 10px
      background-size: 72px 25px
      background-repeat: no-repeat
      vertical-align: top
      bg-image('i/logo')
      cursor: pointer
    .login
      position: absolute
      right: 8px
      top: 6px
      width: 32px
      height: 32px
      background-size: 32px 32px
      background-repeat: no-repeat
      vertical-align: top
      bg-image('i/icon_login')
      cursor: pointer
    .avatar
      position: absolute
      right: 8px
      top: 7px
      width: 30px
      height: 30px
      cursor: pointer
      img
        width: 30px
        height: 30px
        display: block
        border-radius: 100%

  .nav
    position: fixed
    left: 0
    top: 44px
    bottom: 0
    z-index: 999
    width: 100%
    background: #ffffff
    opacity: 0.95
    &.move-transition
      transition: all 0.2s linear
      transform: translate3d(0, 0, 0)
    &.move-enter, &.move-leave
      transform: translate3d(0, -100%, 0)
    .nav-content
      position: relative
      .tabs
        margin-top: 36px
        height: 24px
        line-height: 24px
        height: 24px
        padding: 0 8px 0 4px
        display: flex
        justify-content: space-between
        .tab-item
          flex: 1
          text-align: center
          color: color1
          font-size: fs17
          font-weight: 700
          &.selected
            color: c_red
      .box
        padding: 46px 26px 0;
        border-1px(c_split)
        &::after
          left: 24px
          right: 23px
          bottom: auto
          top: 23px
          width: auto;
        .title
          height: 24px
          line-height: 24px
          position: relative
          color: color1
          font-size: fs17
          font-weight: 700
        .title_inline
          display: inline-block
          margin-right: 38px
          font-weight: normal
          font-size: fs16
          .hot
            position: absolute
            top: 2px
            margin-left: 7px
            width: 22px
            height: 12px
            background-size: 22px 12px
            background-repeat: no-repeat
            vertical-align: top
            bg-image('i/icon_hot')
          .new
            position: absolute
            top: 2px
            margin-left: 7px
            width: 22px
            height: 12px
            background-size: 22px 12px
            background-repeat: no-repeat
            vertical-align: top
            bg-image('i/icon_new')
        .content
          margin-top: 22px
          height: 24px
          line-height: 24px
          .item
            display: inline-block
            color: color1
            font-size: fs16
            padding-right: 20px
      .box1
        padding: 43px 26px 0
        &::after
          top: 22px
      .kf
        margin: 28px 23px 0 24px
        height: 40px
        line-height: 40px
        color: c_icon
        font-size: 15px
        text-align: center
        a
          padding-left: 3px
          font-size: 16px
          color: color1
          letter-spacing: 200
          cursor: pointer
          &:visited
            color: color1
          &:hover
            color: color1
      .nav-close
        height: 120px
        position: relative
        width: 100%
        .icon-close
          border: 1px solid c_split
          width: 82px
          line-height: 30px
          height: 32px
          position: absolute
          left: 50%
          margin-left: -41px
          top: 10px
          font-size: 14px
          color: c_icon
          text-align: center
</style>